<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改权限' : "添加权限" }}</span>
              {{ opid ? '编辑的id是:' : "" }}{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    权限管理页用于创建不同的权能，从而做到权限管理。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">

              <div v-show="currentStep==1" class="pug-card mt20">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{permission}}</div>-->
                  <div class="pug-row" style="justify-content: center">

                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                         <input type="hidden" v-model="permission.id" cref="id"/>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="权限标题">权限标题
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入权限标题" cref="title" maxlen="128"  v-model="permission.title" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="权限名称">权限名称
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入权限名称" cref="name" maxlen="128"  v-model="permission.name" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>

                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="权限URL">权限URL
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入权限URL" cref="url" maxlen="128"  v-model="permission.path" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="权限组件">权限组件
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入权限组件" cref="component" maxlen="128"  v-model="permission.component" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="权限图标">权限图标

                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-select showtext="请选择权限图标" cref="icon" :items="citems" v-model="permission.icon"></pug-select>
                              </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="路由排序">路由排序
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入路由排序" cref="indexon" maxlen="11"  v-model="permission.indexon" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="权限显示">权限显示
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio cref="isshow" :items='[{text:"是",value:1},{text:"否",value:0}]' v-model="permission.isshow" :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="权限代号">权限代号
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入权限代号" cref="code" maxlen="32"  v-model="permission.code" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="权限排序">权限排序
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入权限排序" cref="sorted" maxlen="11"  v-model="permission.sorted" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>

                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="删除状态 0未删除 1删除">删除状态 0未删除 1删除
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <pug-radio v-model="permission.isdelete" cref="isdelete" :items='[{text:"不删除",value:0},{text:"删除",value:1}]' :is-value="false"></pug-radio>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="发布状态 1发布中 0 未发布">发布状态 1发布中 0 未发布
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <pug-radio v-model="permission.status" cref="status" :items='[{text:"是",value:1},{text:"否",value:0}]' :is-value="false"></pug-radio>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="父id">父id
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入父id" cref="pid" maxlen="20"  v-model="permission.pid" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                             <router-link to="/permission"><button  class="pug-btn pug-btn-primary mr10"><span><i class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button></router-link>
                             </div>
                          <div class="pug-space-item" style="">
                            <button type="button" v-if="!opid" class="pug-btn" @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>
                            <button type="button" v-if="opid" class="pug-btn" @click="saveorupdate()"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

         </div>
       </div>
     </div>
   </div>
 </div>
</main>
</template>
<script>
import permissionService from '@/services/permission'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty,getById,isNotEmpty} from "@/utils/validate";
import cache from "@/utils/cache"
export default {
  name: "PermissionAdd.vue",
  components: {},
  data() {
    return {
      citems: [{text:"请选择权限图标",value:""}],
      opid: "",
      permission:{
        id:"", // 主键
        title:"",//路由标题
        name:"", // 权限名称
        path:"", // 权限URL
        component:"",//路由组件
        icon:"",//路由图标
        indexon:"",//路由排序
        isshow:"",//路由显示
        code:"", // 权限代号
        sorted:1 , // 权限排序
        isdelete:0 , // 删除状态 0未删除 1删除
        status:1 , // 发布状态 1发布中 0 未发布
        createTime:"",
        updateTime:"",
        pid:0  // 父id
      },

      currentStep: 1,
      steps: [1, 2, 3]
    }
  },

  created() {


    // 根据id权限管理明细
    if(!isEmpty(this.$route.params.id)){
      this.permission.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    }else{
      if(isNotEmpty(cache.local.get("permission_save"))) {
        this.permission = cache.local.getJSON("permission_save")
      }
    }
    if(!this.opid){
      this.permission.id=this.opid
    }
  },

   watch:{
      permission:{
        deep:true,
        handler(val){
          cache.local.setJSON("permission_save",val);
        }
      }
   },

  methods: {

    // 加载明细
    async getDetail(){
      try{
        const res = await  permissionService.getPermission(this.opid);
        this.permission = res.data;
      }catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 1: 保存方法
    async saveorupdate() {
        try{
            // 校验
            const vresult = await this.validator();
            if(!vresult){
                return;
            }

            pugDialog.confirm('提示',"你确定进行【"+(this.permission.id?'更新':'保存')+"】吗？").then(async ()=>{
                // 执行服务器数据保存权限管理
                const res = await  permissionService.saveUpdatePermission(this.permission);
                if(res.status == 200){
                    if(isEmpty(this.permission.id)){
                        // 重置数据
                        this.reset();
                        cache.local.remove("permission_save");
                        // 返回列表
                        pugMessage.success("添加成功");
                        this.$router.push("/permission/list");
                    }else{
                        cache.local.remove("permission_save");
                        // 返回列表
                        pugMessage.success("修改成功");
                        this.$router.push("/permission/list");
                    }
                }
            })
        }catch(err){
            pugMessage.error("服务器异常,代号：1025");
        }
    },

    // 2: 校验
    async validator(){

        if(isEmpty(this.permission.name)){
           pugMessage.error("请输入权限名称");
           getById('name').focus();
           return false;
        }

        if(isEmpty(this.permission.code)){
           pugMessage.error("请输入权限代号");
           getById('code').focus();
           return false;
        }

        if(isEmpty(this.permission.path)){
           pugMessage.error("请输入权限URL");
           getById('url').focus();
           return false;
        }

        if(isEmpty(this.permission.sorted)){
           pugMessage.error("请输入权限排序");
           getById('sorted').focus();
           return false;
        }

        if(isEmpty(this.permission.isdelete)){
           pugMessage.error("请输入删除状态 0未删除 1删除");
           getById('isdelete').focus();
           return false;
        }

        if(isEmpty(this.permission.status)){
           pugMessage.error("请输入发布状态 1发布中 0 未发布");
           getById('status').focus();
           return false;
        }

        if(isEmpty(this.permission.pid)){
           pugMessage.error("请输入父id");
           getById('pid').focus();
           return false;
        }

        return true;
    },

    // 3: 步骤分解
    prev(index) {
      this.currentStep = index;
    },

    next(index) {
      this.currentStep = index;
    },

    // 4: 文件上传回调
    uploadSuccess(response) {
      console.log("uploadSuccess:", response)
    },

    // 5: 重置数据
    reset(){
        this.permission = {
         citems: [{text:"请选择",value:""}],
          id:"", // 主键
          title:"",//路由标题
          name:"", // 权限名称
          path:"", // 权限URL
          component:"",//路由组件
          icon:"",//路由图标
          indexon:"",//路由排序
          isshow:"",//路由显示
          code:"", // 权限代号
          sorted:1 , // 权限排序
          isdelete:0 , // 删除状态 0未删除 1删除
          status:1 , // 发布状态 1发布中 0 未发布
          createTime:"",
          updateTime:"",
          pid:0  // 父id
       }
    },


  }
}
</script>
<style scoped="">
</style>
